import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import {Checkbox, Tooltip, Button, Modal,Popover,Menu, Dropdown,Icon,message} from 'antd'



import CheckboxDropdown from "./CheckboxDropdown"
import weaBlogDict from '../../../Component/wea-blog-dict';
const innerHref = weaBlogDict.href;
const confirm = Modal.confirm;

import { WeaLocaleProvider,WeaAvatar } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('blogMyBlog')
@observer
class Attention extends Component {
    constructor(props) {
        super(props)
        const {groupId, groupName} = props.data
        this.state = {
            selectVisible: false,
            checkValue: false,
        }
    }

    componentWillReceiveProps(props) {
        const {checked, groupId, groupName} = props.data
        this.setState({
            checkValue: checked,
        })
    }

    componentDidMount() {

    }
    addSpecialU = ()=>{

        const {attentionStatus} = this.props.data;

        if(attentionStatus=="5"||attentionStatus=="4"||attentionStatus=="3"){
          message.warning( getLabel(515663,'只有关注人员，才能特别关注'));
        }else{
            this.props.addSpecial({"specids":this.props.data.userId});
        }

    }


    cancelSpecialU = (uids) => {
        const {cancelSpecial} = this.props;
       let changeGZ = this.changeGZStatus;
        confirm({
            title: getLabel(514284,'确定要取消特别关注吗') ,
            content: '',
            onOk() {
             cancelSpecial({"specids":uids});
                changeGZ();
            },
            onCancel() {
            },
        });

    }

    render() {
        const {data, onCheck,isSpecial} = this.props,
            {checkValue, selectVisible} = this.state,
            {departmentName, imageUrl, lastname, attentionStatus, attentionMeStatus, userId, islower, isreceive,specialStatus} = data,
            groupList = this.props.groups

        let attentionOperation = null,
            attentionDesc = null,
            isreceiveFlag = null
        let groupsArray = []
        if (data.groups) {
            data.groups.forEach(
                item => {
                    groupsArray.push(item.groupName)
                }
            )
        }


        if (attentionMeStatus) {
            switch (attentionMeStatus * 1) {
                case 1:
                    attentionOperation = {icon: "icon-blog-checkbox", text: getLabel('26939',"添加关注")};
                    break;
                case 2:
                    attentionOperation = {icon: "icon-blog-AlreadyConcern", text: getLabel('26941',"申请关注")};
                    break;
                case 3:
                    attentionOperation = {icon: "icon-blog-AlreadyConcern", text: getLabel('384418',"已发送申请"), cancelEvent: true};
                    break;
                case 4:
                    attentionOperation = {icon: "icon-blog-CancelConcern", text: getLabel('26938',"取消关注")};
                    attentionDesc = {icon: "icon-blog-MutualConcern", text: getLabel('83152',"相互关注")};
                    break;
                default:
                    break;
            }
        }

        if (attentionStatus) {
            switch (attentionStatus * 1) {
                case 1:
                    attentionOperation = {icon: "icon-blog-CancelConcern", text: getLabel('26938',"取消关注")};
                    attentionDesc = {icon: "icon-blog-follow", text: getLabel('384419',"已关注")};
                    break;
                case 2:
                    attentionOperation = {icon: "icon-blog-CancelConcern", text: getLabel('26938',"取消关注")};
                    attentionDesc = {icon: "icon-blog-MutualConcern", text: getLabel('83152',"相互关注")};
                    break;
                case 3:
                    attentionOperation = {icon: "icon-blog-AlreadyConcern", text: getLabel('26941',"申请关注")};
                    break;
                case 4:
                    attentionOperation = {icon: "icon-blog-AlreadyConcern", text: getLabel('384418',"已发送申请"), cancelEvent: true};
                    break;
                case 5:
                    attentionOperation = {icon: "icon-blog-checkbox", text: getLabel('26939',"添加关注")};
                    break;
                default:
                    break;
            }
        }

        if(isreceive == '0' && (attentionMeStatus == '2' || attentionStatus == '3')){
            isreceiveFlag = true;
        }




        const menu = (
            <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@jx6i01`} style={{"height":"32px"}}>
                <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@oo23n6`} style={{"height":"32px"}} title={getLabel(514283,'取消特别关注')}>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@uf9mjh`}  style={{"margin-left":" -15px","top":" -6px","width":"98px","border-style":"none","height": "30px",
                        "border-radius": 4,"font-size": "12px"}} onClick={() => {
                       this.cancelSpecialU(this.props.data.userId);
                    }}>{getLabel(514283,'取消特别关注') }</Button>
                </Menu.Item>
            </Menu>
        );

        const style = {
            width: 70,
            height: 70,
            display: "inline-block"
        };

        return (
            <div className="wea-fans-fan">
                <div className="wea-ff-top">
                    {
                        attentionDesc ? (
                            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@zcvyly`} class="wea-tool-tip" placement="right" title={attentionDesc.text}>
                                <span className={"wea-fft-icon " + attentionDesc.icon}/>
                            </Tooltip>
                        ) : ""
                    }
                    {
                        onCheck ? (
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@u6hgls`}
                                className="wea-fft-check"
                                checked={checkValue}
                                onChange={onCheck.bind(null, userId)}
                            />
                        ) : ""
                    }
                </div>
                <ul className="wea-ff-content">
                    <li className="wea-ffc-item wea-ffc-icon">
                        <a href={innerHref.blog(userId)} target="_blank">
                            <span style={style}>
                            <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@6exawy`} userId={userId}/>
                            </span>
                        </a>
                    </li>
                    <li className="wea-ffc-item wea-ffc-name"><a href={innerHref.blog(userId)} target="_blank">{lastname}</a></li>
                    <li className="wea-ffc-item wea-ffc-department">{departmentName}</li>
                    {
                        groupList ? (
                            <li className="wea-ffc-item wea-ffc-group" style={{"font-size": "12px"}}>
                                          <CheckboxDropdown ecId={`${this && this.props && this.props.ecId || ''}_CheckboxDropdown@760dyq`}
                                              title={getLabel('384421',"请选择分组：")}
                                              ref="checkboxDropdown"
                                              footer={
                                                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m25zg7`} type="primary" onClick={this.resetGroup}>{getLabel('30986',"保存")}</Button>
                                              }
                                              values={
                                                  data.groups.map(
                                                      item => {
                                                          return item.groupId
                                                      }
                                                  )
                                              }
                                              options={
                                                  groupList.map(
                                                      item => {
                                                          if (item.groupId == "nogroup") {
                                                              return {
                                                                  name: item.groupName,
                                                                  value: item.groupId,
                                                                  isInconsistent: true
                                                              }
                                                          } else {
                                                              return {name: item.groupName, value: item.groupId}
                                                          }
                                                      }
                                                  )
                                              }
                                              style={{width: "332px","font-size": "12px"}}
                                          >
                                          <div className="wea-ffcg-container" style={{"position": "absolute","margin-left": "16px","font-size": "12px"}}>
                                                 <span className="wea-ffcgc-text" title={groupsArray.join(", ")}>
                                                {groupsArray.join(", ")}&nbsp;&nbsp;&nbsp;
                                            </span>
                                              <span
                                                  style={{"font-size": "12px"}}
                                                  className={"wea-ffcgc-icon icon-coms-organization-down"}
                                              />
                                          </div>
                                          </CheckboxDropdown>
                                {(specialStatus=="2") ?<Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@o5khrq`} overlay={menu}  overlayStyle={{"width":"100px"}}>
                                    <div className="wea-ffcg-container wea-blog-special" style={{"margin-left": "120px"}}>
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@c9s2mo`} type="check" />
                                        &nbsp;
                                        <span className="wea-ffcgc-text" title={getLabel(514285,'特别关注')}>
                                            {getLabel(514285,'特别关注') }
                                            </span>
                                    </div>
                                </Dropdown>:
                                        <div className="wea-ffcg-container wea-blog-special" style={{"margin-left": "120px"}} onClick={this.addSpecialU}>
                                           <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nof608`} type="plus" />
                                            &nbsp;
                                            <span className="wea-ffcgc-text" title={getLabel(514285,'特别关注')}>
                                                {getLabel(514285,'特别关注')}
                                            </span>
                                        </div>
                                }
                            </li>
                        ) : ""
                    }
                    {
                        attentionOperation && !isreceiveFlag ? (
                            <li className={"wea-ffc-item wea-ffc-operation " + (attentionOperation.cancelEvent ? "wea-ffc-operation-disabled" : "")}
                                onClick={
                                    attentionOperation.cancelEvent ?
                                        () => "" :
                                        () => this.changeConcern(userId, attentionStatus || attentionMeStatus, islower)
                                }
                                style={{"font-size": "12px"}}
                            >
                                <span className={"wea-ffco-icon " + attentionOperation.icon} style={{"font-size": "12px"}}/>
                                <span className="wea-ffco-text"  style={{"font-size": "12px"}} title={attentionOperation.text}>&nbsp;&nbsp;&nbsp;&nbsp;{attentionOperation.text}</span>
                            </li>
                        ) : ""
                    }
                </ul>
            </div>
        )
    }


    changeGZStatus = () => {
        this.setState({specialGZ:'1'});
    }

    changeConcern = (userId, attentionStatus, islower) => {
		const {type} = this.props
		const {editFan, getBasicInfo, editAttition} = this.props.blogMyBlog
        const cc = this.changeGZStatus;
        switch (type) {
			case "fan":
				if(attentionStatus == 4) {
					confirm({
						title: getLabel('384420',"确认要取消关注吗？"),
						content: '',
						onOk() {
							editFan(
								{
									userId: userId,
                                    attentionMeStatus: attentionStatus,
									islower: islower		
						},
								result => {
									if (result.status == "1") {
										getBasicInfo()
									}
								}
							)
						},
						onCancel() {},
					});
				} else {
					editFan(
						{
							userId: userId,
                            attentionMeStatus: attentionStatus,
									islower: islower	
					},
						result => {
							if (result.status == "1") {
								getBasicInfo()
							}
						}
					)
				}
                break;
			case "attention":
				if(attentionStatus == 1 || attentionStatus == 2) {
					confirm({
						title: getLabel('384420',"确认要取消关注吗？"),
						content: '',
						onOk() {
							editAttition(
								{
									userId: userId,
									attentionStatus: attentionStatus,
									islower: islower
								},
								result => {
									if (result.status == "1") {
										getBasicInfo()
									}
								}
							)
                           cc();
						},
						onCancel() {},
					});
				} else {
					editAttition(
						{
							userId: userId,
							attentionStatus: attentionStatus,
							islower: islower
						},
						result => {
							if (result.status == "1") {
								getBasicInfo()
							}
						}
					)
				}
                break;
            default:
                break;
        }
    }

    resetGroup = () => {
        let {resetGroup, getWeiboGroup, getAttentionList,isSpecial} = this.props.blogMyBlog
        let ref = this.refs.checkboxDropdown.wrappedInstance,
            {data, group} = this.props,
            destGroup = ref.value
        if(this.refs.checkboxDropdown.wrappedInstance){
            ref = this.refs.checkboxDropdown.wrappedInstance
        }else{
            ref = this.refs.checkboxDropdown
        }


        if(isSpecial){
            group.groupId = 'special';
        }
        if (destGroup.length == 0) destGroup = ["nogroup"]
        resetGroup(
            {userId: data.userId, destGroup: destGroup.join(",")},
            result => {
                if (result.status == "1") {
                    getWeiboGroup()
                    getAttentionList({groupId: group.groupId})
                }
            }
        )
        ref.visible = false
    }

    createAndMoveGroup = (groupName) => {
        let {createAndMoveGroup, getWeiboGroup, getAttentionList} = this.props.blogMyBlog
        
        let {data, group} = this.props
        createAndMoveGroup(
            {idSet: data.userId, sourceGroup: group.groupId, groupName: groupName},
            result => {
                if (result.status == "1") {
                    getWeiboGroup()
                    getAttentionList({groupId: group.groupId})
                }
            }
        )
    }
}

export default Attention